<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-06 22:40:41
-->
<template>
    <div class="list">
    <!-- 头部 -->
      <Head></Head>
    <!-- /头部 -->

    <!-- 体部 -->
    <div class="content" v-loading="loading">
      <div class="wrapper">
        <div class="title_container">
           <div class="page_title">
             <div class="title_img"><img src="../assets/list_img.png" alt=""></div>
             <div class="title_name">{{category.name}}</div>
        </div>
        </div>
       
        <div class="inner_content">
          <!-- 左部导航 -->
           <div class="rank">
               <ul class="menu">
               <li :class="$route.query.name==c.name?'current':''" 
                 v-for="c in navs" 
                 @click="toListHandler(c)"
                 :key="c.id">{{c.name}}
                 <span>></span>
              </li>
          </ul>
          </div>
         <!-- /左部导航 -->

          <div class="articles">
            <!-- 文章列表 -->
            <ul v-if="articleData.total > 0">
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData.list" :key="a.id">
                <div class="title">{{a.title}} 
                  <span>{{a.publishTime | fmtDate}}</span>
                </div>
                  <!-- &nbsp;&nbsp;&nbsp;&nbsp; -->
                  <!-- <span>{{a.readTimes}}</span> -->
              </li>
            </ul>
            <div v-else>
              <el-empty description="暂无数据"></el-empty>
            </div>
            <!-- /文章列表 -->
            <!-- 分页 -->
            <div class="page">
               <el-pagination
                background
                layout="prev, pager, next"
                hide-on-single-page
                @current-change="pageChangeHandler"
                :page-size="articleData.pageSize"
                :total="articleData.total">
              </el-pagination>
            </div>
            <!-- /分页 -->
          </div>
        </div>
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer></Footer>
    <!-- /底部 -->
  </div>
</template>
<script>
import Head from './components/Head'
import Footer from './components/Footer'
import { get } from '../utils/request'
export default {
  components:{
    Head,Footer
  },
  data(){
    return {
      navs:[],
      loading:false,
      category:{},
      param:{
        page:1,
        pageSize:5
      },
      articleData:{
        list:[]
      }
    }
  },
  watch:{
    '$route.query':{
      handler(query){
        this.category = query;
        this.loadArticles();
      },
      deep:true
    }
  },
  created(){
    // 获取参数
    this.category = this.$route.query;
    this.loadCategories();
    this.loadArticles();
   
  },
  methods:{
     // 跳转
    toListHandler(category){
      // 跳转
      this.$router.push({
        path:'/list',
        query:category
      })
    },
    // 加载栏目信息
    loadCategories(){
      let url = '/index/category/findAll'
      get(url).then(resp => {
        this.navs = resp.data;
      })
    },
    toArticleHandler(id){
      this.$router.push({path:'/article',query:{id}})
    },
    pageChangeHandler(page){
      this.param.page = page;
      this.loadArticles();
    },
    loadArticles(){
      this.loading = true;
      let url = "/index/article/pageQuery"
      this.param.categoryId = this.category.id;
      get(url,this.param).then(resp => {
        this.articleData = resp.data;
      }).finally(()=> {
        this.loading = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 变量
$color_primary:#444444;
.list {
   overflow-x:hidden;
  .content {
    background-color: #fff;
    padding: 1em 0;


    .title_container{
      margin-left: 1em;
      border-bottom:1px solid #444444;
      .page_title {
      width:260px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      // padding-left:1em;
      vertical-align: center;
      border-bottom:2px solid #0b6887;
     
      & > .title_img{
        margin-right:.5em;
       
      }
      & > .title_name{
         color: $color_primary;
         font-size: 20px;
          line-height: 65px; 
      }  
    }

    }

  
    .inner_content {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      & > div {
        background-color: #fff;
        border-radius: 5px;
        padding: 1em 1em;
        min-height: 500px;
      }
      .articles{
        flex: 1;
        margin-right: 1em;

        ul > li.article {
          padding: .5em 0;
          border-bottom: 1px solid #ededed;
          & > div {
            line-height: 1.8em;
          }
          .title {
            cursor: pointer;
            & > span{
              float: right;
            }
          }
        }
        .page {
          padding:.5em 0;
          text-align: center;
        }
      }
      .rank {
        flex-basis: 200px;
        position: relative;
        .menu > li{
          background-color: #e0e0e0;
          margin-bottom:.5em;
          padding-left: 1em;
          font-size: 16px;
          line-height:40px;
        }
         .menu > li.current ,
           .menu > li:hover{
           background-color:#0b6887;
           color:#fff;
          }
        li > span{
          float: right;
          margin-right:.5em;
           
        }
      }
      
    }
  }
}
</style>